<template>
  <view class="consent-container">
    <view class="header">
      <text class="title">{{ t('medical.title') }}</text>
    </view>

    <view v-if="loading" class="loading-state">
      <text class="loading-text">{{ t('common.loading') }}</text>
    </view>
    <view v-else-if="!form" class="empty-state">
      <text class="empty-text">{{ t('order_list.noData') }}</text>
    </view>
    <view v-else class="content">
      <!-- 患者信息 -->
      <view class="card">
        <view class="section-title">{{ t('medical.patient_info') }}</view>
        <view class="row">
          <text class="label">{{ t('order_detail.patientName') }}</text>
          <text class="value">{{ patientName }}</text>
        </view>
        <view class="row">
          <text class="label">{{ t('settings.gender') }}</text>
          <text class="value">{{ genderText }}</text>
        </view>
        <view class="row">
          <text class="label">{{ t('settings.birthday') }}</text>
          <text class="value">{{ formatDate(form.patient_info?.date_of_birth) }}</text>
        </view>
        <view class="row">
          <text class="label">{{ t('settings.address') }}</text>
          <text class="value">{{ form.patient_info?.address || '-' }}</text>
        </view>
        <view class="row">
          <text class="label">{{ t('settings.medical_insurance') }}</text>
          <text class="value">{{ form.patient_info?.medical_insurance || '-' }}</text>
        </view>
        <view class="row">
          <text class="label">{{ t('settings.profession') }}</text>
          <text class="value">{{ form.patient_info?.profession || '-' }}</text>
        </view>
        <view class="row">
          <text class="label">{{ t('settings.mobile') }}</text>
          <text class="value">{{ form.patient_info?.mobile || '-' }}</text>
        </view>
      </view>

      <!-- 主诉及疼痛 -->
      <view class="card">
        <view class="section-title">{{ t('medical.current_condition') }}</view>
        <view class="row">
          <text class="label">{{ t('order.main_complaint') }}</text>
          <text class="value">{{ form.main_complaint || '-' }}</text>
        </view>
        <view class="row">
          <text class="label">{{ t('order.pain_type') }}</text>
          <text class="value">{{ form.pain_description || '-' }}</text>
        </view>
        <view class="row">
          <text class="label">{{ t('order.pain_index') }}</text>
          <text class="value">{{ form.pain_intensity ?? '-' }}</text>
        </view>
      </view>

      <!-- 其它情况 -->
      <view class="card">
        <view class="section-title">{{ t('medical.disease_record_title') }}</view>
        <view class="row">
          <text class="label">{{ t('medical.disease_record_consent') }}</text>
          <text class="value">{{ diseaseRecordText }}</text>
        </view>
        <view class="row">
          <text class="label">{{ t('medical.allergy_desc') }}</text>
          <text class="value">{{ form.allergy_desc || '-' }}</text>
        </view>
        <view class="row">
          <text class="label">{{ t('medical.medication_desc') }}</text>
          <text class="value">{{ form.medication_desc || '-' }}</text>
        </view>
        <view class="row">
          <text class="label">{{ t('medical.other_known_diseases') }}</text>
          <text class="value">{{ form.other_known_diseases || '-' }}</text>
        </view>
        <view class="row">
          <text class="label">{{ t('medical.adverse_reaction') }}</text>
          <text class="value">{{ form.adverse_reaction || '-' }}</text>
        </view>
      </view>

      <!-- 签名信息 -->
      <view class="card">
        <view class="section-title">{{ t('medical.consent_form') }}</view>
        <view class="row">
          <text class="label">{{ t('medical.patient_signature_true') }}</text>
          <image v-if="form.patient_info?.signature" :src="form.patient_info.signature" class="signature-img" mode="aspectFit" />
          <text v-else class="value">{{ t('medical.no_signature') }}</text>
        </view>
        <view class="row">
          <text class="label">{{ t('medical.therapist_signature_true') }}</text>
          <image v-if="form.doctor_signature" :src="form.doctor_signature" class="signature-img" mode="aspectFit" />
          <text v-else class="value">{{ t('medical.no_signature') }}</text>
        </view>
        <view class="row">
          <text class="label">{{ t('medical.therapist_date') }}</text>
          <text class="value">{{ formatDate(form.signature_date) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { useI18n } from 'vue-i18n'
import { getConsentForm } from '@/api/medical.js'

export default {
  data() {
    return {
      loading: false,
      form: null,
      consentId: ''
    }
  },
  setup() {
    const { t } = useI18n()
    return { t }
  },
  onLoad(options) {
    this.consentId = options?.consent_id || ''
    this.fetchConsent()
  },
  methods: {
    async fetchConsent() {
      if (!this.consentId) {
        this.form = null
        return
      }
      if (this.loading) return
      this.loading = true
      try {
        const res = await getConsentForm(this.consentId)
        if (res && (res.code === 200 || res.success)) {
          this.form = res.result
        } else {
          this.form = null
          uni.showToast({ title: res?.message || this.t('common.request_failed'), icon: 'none' })
        }
      } catch (e) {
        this.form = null
        uni.showToast({ title: this.t('common.request_failed'), icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    formatDate(d) {
      if (!d) return '-'
      try {
        const dt = new Date(d)
        const y = dt.getFullYear()
        const m = String(dt.getMonth() + 1).padStart(2, '0')
        const dd = String(dt.getDate()).padStart(2, '0')
        return `${y}-${m}-${dd}`
      } catch {
        return '-'
      }
    }
  },
  computed: {
    patientName() {
      const last = this.form?.patient_info?.last_name || ''
      const first = this.form?.patient_info?.first_name || ''
      const name = `${last}${first}`.trim()
      return name || this.t('order_list.unknownUser')
    },
    genderText() {
      const g = this.form?.patient_info?.gender
      if (g === 1) return this.t('settings.male')
      if (g === 0) return this.t('settings.female')
      return '-'
    },
    diseaseRecordText() {
      if (!this.form?.disease_record) return '-'
      if (Array.isArray(this.form.disease_record)) {
        return this.form.disease_record.length > 0 
          ? this.form.disease_record.join('、') 
          : '-'
      }
      return this.form.disease_record || '-'
    }
  }
}
</script>

<style scoped>
.consent-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 20rpx;
}
.header {
  padding: 24rpx 20rpx 0 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  text-align: center;
}
.loading-state,
.empty-state {
  margin: 20rpx;
  padding: 100rpx 20rpx;
  background: #fff;
  border-radius: 12rpx;
  text-align: center;
}
.loading-text,
.empty-text {
  font-size: 28rpx;
  color: #999;
}
.content {
  padding: 0 20rpx 20rpx 20rpx;
}
.card {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}
.row:last-child {
  border-bottom: none;
}
.label {
  font-size: 26rpx;
  color: #666;
  margin-right: 16rpx;
}
.value {
  font-size: 28rpx;
  color: #333;
  text-align: right;
  flex: 1;
}
.signature-img {
  width: 160rpx;
  height: 80rpx;
  border: 1rpx solid #e9ecef;
  border-radius: 8rpx;
  background: #fff;
}
</style>

